<template>
  <!-- 显示用户详细信息等 -->
  <div class="info-container">
    <div class="backbar">
      <div class="back" @click="onBack">
        <!-- <div class="back" v-hammer:tap="(ev) => onBack(ev)"> -->
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>

    <div class="info-wrapper flexbox align-center justify-center">
      <div class="head">
        <img :src="userInfo.headUrl" alt />
      </div>
      <div class="content flexbox column">
        <div class="username ellipsis">{{ userInfo.nickname }}</div>
        <div class="userid">个人ID: {{ userInfo.userId }}</div>
      </div>
      <div class="action"></div>
    </div>

    <div class="section-wrapper">
      <div class="list-item" @click="onGotoUserBonus">
        <!-- UserBonus -->
        <div class="icon">
          <img src="@/assets/icons/bonus.svg" alt />
        </div>
        <div class="title">积分</div>
        <div class="ten">
          <span class="user-score">{{ userInfo.score }}</span>
          <i class="fa fa-angle-right fa-lg"></i>
        </div>
      </div>
      <div @click="onGotoUserAlbum" class="list-item">
        <div class="icon">
          <img src="@/assets/icons/qrcode.svg" alt />
        </div>
        <div class="title">相册</div>
        <div class="ten">
          <i class="fa fa-angle-right fa-lg"></i>
        </div>
      </div>
      <div @click="onGotoInviterInfo" class="list-item"  v-if="inviter.inviteName">
        <div class="icon">
          <img src="@/assets/icons/add_group.svg" alt />
        </div>
        <div class="title" style="padding-left: 18px;" >进群方式</div>
          <span class="emp-name ellipsis" style="text-align: right;width:70px;">{{inviter.inviteName}}</span>
           <span style="color: #909090;white-space: nowrap;text-align: right;">邀请进群</span>
        <div style="margin-left: 12px;">
          <i class="fa fa-angle-right fa-lg"></i>
        </div>
      </div>
    </div>

    <!-- <div class="action elevation-1" v-if="showAction">
      <div class="item kick" @click="onKickOut">踢出群聊</div>
    </div>-->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from "vuex-class";
import { Webim } from "@/utils/types";
import { Response } from "@/api/bean";
import { MsgTypeKV } from "@/api/socket/imClient";
import MessageMixin from "@/mixins";
import Cookie from "js-cookie";
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace("chatModule");
const userModule = namespace("userModule");

@Component<MemberInfo>({
  mixins: [MessageMixin]
})
export default class MemberInfo extends Vue {
  @chatModule.State("groupSetting") groupSetting: any;
  @userModule.State("currentUser") currentUser: any;
  @userModule.State("memberInfo") memberInfo: any;

  private userInfo: any = {
    // headUrl: 'http://img2.imgtn.bdimg.com/it/u=265535345,1890400617&fm=26&gp=0.jpg',
    // userId: 32849,
    // nickname: '=是几飒爽的'
  };

  private showAction: boolean = true;
  private showScore: boolean = false;

  private inviter: any = {};

  private eventList: Array<string> = [
    "$getUserInfo",
    "$kickOut",
    "$getUserQrcode",
  ];

  private get showInviter() {
    console.error(this.inviter.inviteId, this.userInfo.userId);
    
    return (this.inviter.inviteId != this.userInfo.userId) && (this.groupSetting.status == 1 || this.groupSetting.status == 2);
  }

  protected mounted() {
    this.initEvents(this.eventList);

    this.showScore = this.groupSetting.status == 1

    this.sendMessage(MsgTypeKV.getUserQrcode, {
      imAccount: this.memberInfo.fromAccount,
    });

    // this.showAction = this.groupSetting.status === 1;

    // this.sendMessage(MsgTypeKV.getUserInfo, {
    //   userId: this.currentUser.userId,
    // });
  }

  private onBack() {
    this.$router.push({ name: 'ChatPanel' })
  }

  /**
   * 
   */
  private onGotoUserBonus() {
    if (this.showScore) {
      this.$router.push({
        name: 'UserBonus',
        params: { score: this.userInfo.score },
      });
    } else {
      // this.$createToast({
      //   txt: '',
      //   type: "warn",
      //   time: 3000
      // }).show();
    }
  }

  private onGotoUserAlbum() {
    this.$router.push({
      name: 'MemberAlbum',
      params: { userId: this.userInfo.userId },
    });
  }

  private onGotoInviterInfo() {
    // this.$router.push({
    //   name: 'MemberAlbum',
    //   params: { userId: this.userInfo.userId },
    // });
    console.warn(this.inviter)
    this.sendMessage(MsgTypeKV.getUserQrcode, {
      imAccount: this.inviter.inviteImAccount,
    });

  }

  // 踢出群聊
  private onKickOut() {
    this.sendMessage(MsgTypeKV.kickOut, {
      imUserList: [this.currentUser],
      imAccount: this.currentUser.imAccount
    });
  }

  /**
   * 获取用户信息
   */
  private $getUserInfo(data: any) {
    if (data.result === 0) {
      // this.sendMessage(MsgTypeKV.getApplyList);
      // this.userInfo = data.userInfo;
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  /**
   * 踢人
   */
  private $kickOut(data: any) {
    if (data.result === 0) {
      this.$createToast({
        txt: data.message,
        type: "corrent",
        time: 3000
      }).show();
      this.$router.go(-1);
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  /**
   * 获取到用户qrcode
   */
  private $getUserQrcode(data: any) {
    // this.userInfo = data.info;
    // this.userInfo.score = data.score;
    this.userInfo = {
      ...data.info,
      score: data.score,
    };
    this.inviter = {
      inviteId: data.inviteId,
      inviteName: data.inviteName,
      inviteImAccount: data.inviteImAccount,
    };
    
  }
}
</script>

<style lang="stylus" scoped>
.info-container
  width 100%
  height 100%
  overflow-x hidden
  overflow-y auto
  background #f1f1f1

.info-wrapper 
  width 100% 
  height 140px
  background white 
  margin-bottom 20px
  .head 
    flex-basis 25%
    width 25%
    img 
      width 60px 
      height 60px 
      border-radius 3px
  .content 
    flex-basis 65%
    width 65%
    overflow hidden
    text-align left
    .username 
      width 100%
      font-size 25px 
      font-weight 500 
      margin-bottom 14px
    .userid 
      color #909090
      font-size 15px
  .action 
    flex-basis 10%
    width 10%

.section-wrapper
  margin-top 6px
  .list-item 
    width 100% 
    height 48px 
    display flex
    justify-content space-between
    align-items center
    background white
    padding 2px 12px
    box-sizing border-box
    border-bottom 1px solid #f5f5f5
    .icon 
      flex-basis 10% 
      width 10% 
      img 
        width 24px 
        height 24px 
    .title 
      flex-basis 40% 
      width 40% 
      text-align left
    .ten 
      flex-basis 40% 
      width 40% 
      text-align right

.user-score
  display inline-block 
  margin-right 20px
</style>

